<template>
  <div class="content-box">
    <div class="page-title">活动记录</div>
    <div
      style="display: flex;justify-content: space-between;align-items: center;padding-left: 12px;padding-right: 12px;">
      <p>共计录入活动：{{ activeInfo.length }}条</p>
      <el-button type="primary" @click="toAdd">新增活动</el-button>
    </div>
    <div class="active-container">
      <ul>
        <li v-for="(item, index) in activeInfo">
          <el-row>
            <el-col :span="24" style="text-align: right;">
              <el-dropdown>
                <el-button type="primary">
                  操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="listClick(0, index)" v-if="item.approvalResult == 1">二维码</el-dropdown-item>
                    <el-dropdown-item @click="listClick(1, index)">图片</el-dropdown-item>
                    <el-dropdown-item @click="listClick(2, index)">视频</el-dropdown-item>
                    <el-dropdown-item @click="listClick(3, index)">{{ item.cancelStatus ==
                      0 ? '撤销' : '启用' }}</el-dropdown-item>
                    <el-dropdown-item @click="listClick(4, index)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown></el-col>
          </el-row>
          <p>
            <span>活动名称：{{ item.activityName }}</span>
          </p>
          <p><span>活动类型：{{ item.activityTypeName }}</span></p>
          <p>
            <span v-show="item.approvalResult == null">活动状态：审批中</span>
            <span v-show="item.approvalResult == 0">活动状态：审批中</span>
            <span v-show="item.approvalResult == 1">活动状态：审批通过</span>
            <span v-show="item.approvalResult == 2">活动状态：审批不通过</span>
          </p>
          <p><span>开始时间：{{ item.startTime }}</span></p>
          <p><span>结束时间：{{ item.endTime }}</span></p>
          <p><span>活动地点：{{ item.place }}</span></p>
          <p><span>点赞数量：{{ item.likes == null ? '0' : item.likes }}</span></p>
        </li>
      </ul>
    </div>
    <el-image-viewer v-if="showImagePreview" :zoom-rate="1.2" @close="closePreview" :url-list="srcList" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, provide, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { getDetail, setLike, getList } from '@/api/evaluate/activite'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/store'
import a from '../../../components/a'
import { ArrowDown } from '@element-plus/icons-vue'
import { cancelActivity, createQrCodeUrl, deleteActivity } from '@/views/yearCheck/ykb/otherApi'

const showImagePreview = ref(false);
const imageRef = ref();
const router = useRouter()
const activeInfo = ref([])
const imageUrl = ref('');
const srcList = ref([]);
const toAdd = () => {
  router.push({
    path: '/phone/activity/add',
  })
}

const getListActivity = () => {
  const userStore = useUserStore();
  const param = {
    pageNum: 1,
    pageSize: 1000,
    socialCode: userStore.userInfo.workNo,
  };
  getList(param).then(res => {
    console.log(res)
    activeInfo.value = res.data.rows
  })
}
const listClick = (type, index) => {
  console.log(activeInfo.value[index])
  switch (type) {
    case 0:
      createQrCodeUrl(activeInfo.value[index].id).then(response => {
        imageUrl.value = response.msg;
        srcList.value = [response.msg]
        showImagePreview.value = true
        fetch(response.msg)
          .then(response => response.blob())
          .then(blob => {
            const a = document.createElement('a')
            const url = URL.createObjectURL(blob)
            a.href = url
            a.download = activeInfo.value[index].activityName + '.png'
            a.click()
            URL.revokeObjectURL(url)
          })
          .catch(err => console.error(err))
      })
      break;
    case 1:
      const file = JSON.parse(activeInfo.value[index].imgFileUrl);
      imageUrl.value = file.url;
      srcList.value = [file.url]
      showImagePreview.value = true
      break;
    case 2:
      const video = JSON.parse(activeInfo.value[index].mpFileUrl);
      console.log(video.url)
      fetch(video.url)
        .then(response => response.blob())
        .then(blob => {
          const a = document.createElement('a')
          const url = URL.createObjectURL(blob)
          a.href = url
          a.download = video.fileName;
          a.click()
          URL.revokeObjectURL(url)
          window.open(video.url)
        })
        .catch(err => console.error(err))
      break;
    case 3:
      ElMessageBox.confirm(
        '是否撤销此活动记录?',
        '提示', {
        confirmButtonText: '撤销',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }
      )
        .then(() => {
          cancelActivity(activeInfo.value[index].id).then(response => {
            console.log(response)
            ElMessage({
              message: '撤销活动成功',
              type: 'warning',
              plain: true,
            })
            getListActivity();
          })
        })
        .catch(() => {

        })
      break;
    case 4:
      ElMessageBox.confirm(
        '是否删除此活动记录?',
        '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }
      )
        .then(() => {
          deleteActivity(activeInfo.value[index].id).then(response => {
            console.log(response)
            ElMessage({
              message: '删除活动成功',
              type: 'warning',
              plain: true,
            })
            getListActivity();
          })
        })
        .catch(() => {

        })
      break;
  }
}

const closePreview = () => {
  showImagePreview.value = false
}
onMounted(() => {
  getListActivity();
});
</script>
<style lang="scss" scoped>
.content-box {
  padding: 0;
  height: 100vh;
  background-color: #f5f6f8;

  .page-title {
    text-align: center;
    font-size: 20px;
    background: #1890ff;
    color: white;
    padding: 0px;
    margin: 0px;
    line-height: 60px;
  }

  .active-container {
    ul {
      list-style: none;
      margin: 10px;
      padding: 0;

      >li {
        padding: 10px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 2px 2px 5px 0px #cecece;
        margin: 10px 0;
        position: relative;
      }
    }
  }
}
</style>
